<template>
  <div>
    <div class="top">
       <span class="fontStyle">
          <router-link to="/blog" class="CommentLink">
            首页/
          </router-link>
        </span>
      <span class="fontStyle">文章</span>
    </div>
    <div v-html="Md" class="markdown-body"></div>

    <div style="width: 95%;margin: 10px auto">
      <div class="CommentText" style="">{{CommentData.length}} 条评论</div>
      <div class="CommentBox" v-for="item in CommentData">
        <div style="display: flex">
          <div class="userHead" :style="{backgroundImage: 'url('+item.user.headPicUrl+')'}"></div>
          <div style="margin-left: 10px">
            <div style="font-size: 14px;color:#5C657E;font-weight: bold">{{item.user.username}}</div>
            <div style="font-size: 10px;color:#5C657E;margin-top: 8px">发布于:{{ item.createDate.substring(0,10) }}</div>
          </div>
        </div>
        <div class="content">
          {{ item.content }}
        </div>
      </div>

      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 4}"
        placeholder="说点什么"
        v-model="CommentForm.content">
      </el-input>
      <div style="margin-top: 20px">
        <el-button type="primary" @click="Comment">
          发布评论
        </el-button>
      </div>
    </div>

  </div>
</template>

<script>
import marked from 'marked'
import axios from "axios";
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/myStyle.css';
export default {
  name: "Md",
  data() {
    return{
      userInfo:{},
      Md: "",
      CommentForm:{
        uid: 0,
        mid: 0,
        content: ""
      },
      canComment: false,
      CommentData: []
    }
  },
  methods: {
    Comment(){
      let form = new FormData()
      if (this.userInfo.username==null){
        this.$message.info("请登陆后操作")
        return;
      }
      form.append("uid",this.CommentForm.uid)
      form.append("mid",this.CommentForm.mid)
      form.append("content",this.CommentForm.content)
      this.$axios({
        url: "/addComment",
        method: "post",
        data: form,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then(res => {
        this.$message.info(res.data)
        setTimeout(function (){
          // location.reload()
        },1000)
      })
    },
    addView(bid){
      this.$axios("/addView?mid="+bid)
    }
  },
  mounted() {
    marked.setOptions({
        renderer: new marked.Renderer(),
        highlight: function(code) {
          return hljs.highlightAuto(code).value;
        },
        pedantic: false,
        gfm: true,
        tables: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false
      }
    );
    axios.get("/getMd?mid="+this.$route.params.mid).then(res => {
      this.Md = marked(res.data.mdtext).replace(/<pre>/g, "<pre class='hljs'>")
    })
  },
  created() {
    this.CommentForm.mid = this.$route.params.mid
    let token = JSON.parse(window.localStorage.getItem("access-admin"))
    if (token!=null){
      this.canComment = true
      this.CommentForm.uid = token.uid
      this.userInfo = token
    }

    this.$axios("/getComment?mid="+this.CommentForm.mid).then(res => {
      this.CommentData = res.data
    })

    this.addView(this.$route.params.mid)
  }
}
</script>

<style scoped>
.CommentText{
  color: #5C657E;font-size: 20px;font-weight: bold;margin-bottom: 10px;border-bottom: 1px solid #d0d0d0;
  text-indent: 0.5em;
  border-radius: 5px;
}
.content{
  width: calc(100% - 10px);margin-top: 10px;font-size: 14px;color: #5C657E;
  padding: 5px;
}
.userHead{
  width: 45px;
  height: 45px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
}
.CommentBox{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.top{
  padding: 5px;
  border-radius: 5px;
  /*border: 1px solid red;*/
  margin: 10px auto;
  width: 95%;
  background-color: white;
  border-bottom: 1px solid #AAA5E0;
}
.CommentLink{
  text-decoration: none;
  color: #5C657E;
}
.fontStyle{
  font-size: 14px;
  color: #5C657E;
}
.markdown-body {
  padding: 20px;
}
.back{
  padding: 20px;
}
</style>
